<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Insert title here</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
	<meta charset="UTF-8">
	<title>Title</title>
	<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
	<!-- 最新 Bootstrap4 核心 CSS 文件 -->
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
	<script rel="stylesheet" th:src="@{/js/bootstrap.bundle.min.js} "></script>
	<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
	<script	th:src="@{/js/bootstrap.min.js}"rel="stylesheet"> </script>

	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
	<script th:src="@{/js/functions.js}"></script>

</head>
<body>
<!-- 顶栏 -->
<div th:include="../templates/admin/top::headtop"></div>
<!-- 中间主体 -->
<div class="container" id="content">
	<div class="row">
		<div th:include="../templates/admin/menu::headmenu"></div>
		<div class="col-md-10">
			<div class="panel panel-default">
				<div class="panel-heading">
					<div class="row">
						<h1 class="col-md-5">用户管理</h1>
							<form class="form-inline" id="searchForm" role="form" th:action="@{/admin/findUser}" th:method="post">
								<div class="form-group col-md-2 offset-1">
									<input class="form-control input-sm" id="user_name" name="user_name" placeholder="用户名" th:value="${param.user_name}"
										   type="text"/>
								</div>
								<div class="form-group col-md-2">
									<select class="form-control input-sm" id="gender" name="gender">
										<option value="">---不限制性别---</option>
										<option th:selected="${#strings.trim(param.gender)=='1'}" value="1">男</option>
										<option th:selected="${#strings.trim(param.gender)=='0'}" value="0">女</option>
									</select>
								</div>
								<div class="form-group col-md-1">
									<button class="btn btn-primary btn-sm" type="submit">搜索</button>
								</div>
							</form>
						<div class="form-group col-md-1">
							<button onclick="registerMadel()" class="btn btn-primary btn-sm" type="submit">新增用户</button>
						</div>
					</div>
				</div>
				<table class="table table-bordered">
					<thead>
					<tr>
					<tr>
						<th>选项</th>
						<th>#</th>
						<th>用户名</th>
						<th>真实姓名</th>
						<th>权限</th>
						<th>性别</th>
						<th>年龄</th>
						<th>电话</th>
						<th>邮箱</th>
						<th>操作</th>
					</tr>

					</tr>
					</thead>
					<tbody>
					<tr th:each="u,stat:${UserList}">
						<td><input name="chk" th:value="${u.user_id}" type="checkbox"/></td>
						<td th:text="${u.user_id}"></td>
						<td th:text="${u.user_name}"></td>
						<td th:text="${u.real_name}"></td>
						<td th:text="${u.vip}=='1'?'会员':'管理员'"></td>
						<td th:text="${u.gender}=='1'?'男':'女'"></td>
						<td th:text="${u.age}"></td>
						<td th:text="${u.phone}"></td>
						<td th:text="${u.email}"></td>
						<td>

							<button class="btn btn-default btn-xs btn-danger btn-primary" th:onclick="Updata([[${u.user_id}]])">修改</button>
							<button class="btn btn-default btn-xs btn-danger btn-primary" th:onclick="deleteUser()">删除</button>
						</td>
					</tr>
					</tbody>
				</table>
			</div>

		</div>
	</div>
</div>
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					用户注册
				</h4>
			</div>
			<div class="modal-body">
				<form id="bjy-form" class="form-inline" name="newUser" th:action="@{/admin/addUser}" method="post" onsubmit="return check()">
					<table class="table">
						<tbody>
						<tr>
							<td>用户名</td>
							<td><input type="text" class="form-control" name="user_name" placeholder="请输入用户名"/></td>
						</tr>
						<tr>
							<td>密码</td>
							<td><input type="password" class="form-control" name="password" placeholder="请输入密码"/></td>
						</tr>
						<tr>
							<td>确认密码</td>
							<td><input type="password" class="form-control" name="password1" placeholder="请再次输入密码"/></td>
						</tr>
						<tr>
							<td>昵称</td>
							<td><input type="text" class="form-control" name="real_name" placeholder="请输昵称"/></td>
						</tr>

						<tr>
							<td>性别</td>
							<td>
									<input type="radio" class="form-check-input" name="gender"
										   value="1"  >
									<label class="form-check-label" for="gender">男</label>

									<input type="radio" class="form-check-input" name="gender"
										   value="0" >
									<label class="form-check-label" for="gender" >女</label>
							</td>

						</tr>
						<tr>
							<td>手机</td>
							<td><input type="text" class="form-control" name="phone" placeholder="手机"/></td>
						</tr>

						<tr>
							<td>邮箱</td>
							<td><input type="text" class="form-control" name="email" placeholder="邮箱"/></td>
						</tr>


						<tr>
							<td><input class="btn btn-default" type="submit" value="注册"/></td>
							<td><input class="btn btn-default" type="reset" value="重置"/></td>
						</tr>
						</tbody>
					</table>
				</form>

			</div>
		</div>
	</div>
</div>




<script type="text/javascript">
	function deleteUser() {
		var str = [];
		var sel = document.getElementsByName("chk");//获取checkbox的值
		console.log(sel)
		for (var i = 0; i < sel.length; i++)
			if (sel[i].checked == true)
				str.push(sel[i].value);
		if (str == "") {
			alert("请至少选择一条记录");
			return false;
		}


		// if(window.confirm("确定删除吗")){
		//     window.location=getContextPath()+"/admin/DeleteUser?userids="+str;
		// }
		if (window.confirm("确定删除吗")) {
			$.post(getContextPath()+"/admin/DeleteUser", {userids: str.join(",")}, function (data) {
				window.location.reload();
			});
		}
	}

	function Updata(userid) {

		window.location = getContextPath() + "/admin/findIdUser?user_id=" + userid;
		// 	$.post("./findIdUser",{userid : userid}, function (data) {
		// 	    window.location.reload();
		// 	});
		// }

	}

	function registerMadel() {
		$("#register").modal("show");
	}
</script>
</body>
</html>